<template>
  <el-tabs class="tabs-container" v-model="activeName" :stretch="true">
    <el-tab-pane label="全部订单" name="first" tab-position="left">
      <div v-if="orderData.length>0">
        <OrderListItem v-for="(item,index) in orderData" :orderDataItem="item" btnMsg="再下一单" :key="index"></OrderListItem>
      </div>
      <img class="no-order" v-else src="@/assets/order/img/nothing.png" alt="没有记录" />
    </el-tab-pane>
    <el-tab-pane label="待付款" name="second" tab-position="left">
      <div v-if="payData.length>0">
        <OrderListItem v-for="(item,index) in payData" :orderDataItem="item" btnMsg="去支付" :key="index"></OrderListItem>
      </div>
      <img class="no-order" v-else src="@/assets/order/img/nothing.png" alt="没有记录" />
    </el-tab-pane>
    <el-tab-pane label="待评价" name="third" tab-position="right">
      <div v-if="appraiseData.length>0">
        <OrderListItem v-for="(item,index) in appraiseData" :orderDataItem="item" btnMsg="去评价" :key="index"></OrderListItem>
      </div>
      <img class="no-order" v-else src="@/assets/order/img/nothing.png" alt="没有记录" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import OrderListItem from '../components/OrderListItem.vue'
  export default {
    name: 'OrderList',
    created() {
      console.log('###');
    },
    data() {
      return {
        activeName: 'first'
      }
    },
    props: {
      orderData: {
        type: Array,
        require: true
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    components: {
      OrderListItem
    },
    computed: {
      payData() {
        return this.orderData.filter(item => item.type == '待支付')
      },
      appraiseData() {
        return this.orderData.filter(item => item.type == '待评价')
      }
    },
  }
</script>

<style>
  .tabs-container {
    padding: 10px;
  }
.no-order{
  height: 150px;
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}
  .el-tabs__content {
    height: calc(100vh - 100px);
    overflow-y: scroll;
  }

  .el-tabs__item:hover {
    color: #FFC300;
    cursor: pointer;
  }

  .el-tabs__active-bar {
    background-color: #FFC300;
  }

  .el-tabs__item.is-active {
    color: #FFC300;
    cursor: pointer;
  }
</style>